<%--
  Created by IntelliJ IDEA.
  User: Edward_yang
  Date: 2017/12/25 0025
  Time: 13:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>服务标签管理</title>
    <script type="text/javascript">
        function formatterImg(value){
            if(value!=null){
                return '<img height="40px"  src="'+value+'" alt="" />';
            }else{
                return '';
            }

        }

        //扩展的Date的format方法(上述插件实现) 日期转换格式
        Date.prototype.format = function (format) {
            var o = {
                "M+": this.getMonth() + 1, // month
                "d+": this.getDate(), // day
                "h+": this.getHours(), // hour
                "m+": this.getMinutes(), // minute
                "s+": this.getSeconds(), // second
                "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
                "S": this.getMilliseconds()
                // millisecond
            }
            if (/(y+)/.test(format))
                format = format.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            return format;
        }
        //调用日期转化格式方法
        function formatDatebox(value) {

            if (value == null || value == '') {
                return '';
            }
            var dt;
            if (value instanceof Date) {
                dt = value;
            } else {
                dt = new Date(value);
            }

            return dt.format("yyyy-MM-dd hh:mm:ss");
        }
    </script>
</head>
<body style="padding: 0px">
<div data-options="region:'center',split:true,border:false" title="属性列表" style="width:100%;height: 100%">
<table id="serverLabel_datagrid" style="border: 1px solid rgb(95,158,160);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
       class="easyui-datagrid"
       data-options="
		   		url:'${path}/serverLabel/serverLabelList.do',
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#serverLabel_tools',
		   		pagination:true,
		   		singleSelect:false,
		   		 frozenColumns:[[
                {field:'ck',checkbox:true}]],
		   		">
    <thead>
    <th data-options="field:'id'">编号</th>
    <th data-options="field:'classPropertyFont',width:100">class属性的字</th>
    <th data-options="field:'classPropertyName',width:100">class属性的名称</th>
    <th data-options="field:'classPropertyImg',width:100,formatter:formatterImg">class属性的图片</th>
    <th data-options="field:'classPropertyText',width:400">class属性的文本</th>
    <th data-options="field:'ord',width:50">排序</th>
    <th data-options="field:'createTime',width:100,formatter:formatDatebox">创建时间</th>
    </thead>
</table>
    <div id="serverLabel_tools">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick=" $('#serverLabel_datagrid').datagrid('reload')">刷新</a>
        <shiro:hasPermission name="/serverLabel/add.do">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="openEditServerLabelBox('add')">添加</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="/serverLabel/edit.do">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="openEditServerLabelBox('update')">修改</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="/serverLabel/delete.do">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteServerLabel()" >删除</a>
        </shiro:hasPermission>

        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-tip'" onclick="openEditDescribe()" >添加描述</a>
        <label>关键词:</label>
        <input class="easyui-searchbox" data-options="prompt:'请输入class的名称',searcher:doServerLabelSearch" style="width:220px;"/>
    </div>
    <!--添加弹窗-->
    <style type="text/css">

        .grid{font:12px arial,helvetica,sans-serif;border:0px solid #8DB2E3}
        .grid td{font:100% arial,helvetica,sans-serif;height:40px;padding:5px}
        .grid{width:100%;border-collapse:collapse}
        .grid td{border:1px solid #e0e0e0;padding-left:5px}

    </style>
    <div class="easyui-dialog" id="edit_serverLabel_dialog" title="添加服务标签" data-options="closed:true,modal:true,width:500,height:450">
        <form id="edit_serverLabel_form" method="post">
            <table class="grid" align="center" style="margin-top: 40px">
                <input type="hidden" name="id" id="edit-id-input" />
                <tr>
                    <td colspan="3" style="text-align: center"><h2>服务标签</h2></td>
                </tr>
                <tr>
                    <td><lable for="name">class属性的名称:</lable></td>
                    <td>
                        <input class="easyui-validatebox" name="classPropertyName" data-options="required:true" style="width:200px;"/>
                    </td>
                    <td> 图片预览:</td>
                </tr>
                <tr >
                    <td><lable for="code">class属性的字:</lable></td>
                    <td>
                        <input class="easyui-validatebox" name="classPropertyFont" data-options="required:true" style="width:200px;"/>
                    </td>
                    <td rowspan="2"><img height="60px" src="" id="tpyl"/></td>

                </tr>
                <tr>
                    <td><lable for="type">class属性的文本:</lable></td>
                    <td>
                        <input class="easyui-validatebox" name="classPropertyText" data-options="required:true" style="width:200px;"/>
                    </td>
                </tr>

                <tr >
                    <td> <div id="upload"></div>
                        class属性的图片</td>
                    <td><input class="easyui-validatebox" readonly="readonly" type="text" id="logo"    name="classPropertyImg" style="width:200px;"/></td>
                    <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImage();">上传图片</a></td>
                    <script type="text/javascript">

                        var _editor;
                        $(function() {
                            //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                            _editor = UE.getEditor('upload',{
                                serverUrl:"${path}/file/upload.do?compress=1"
                            });

                            _editor.ready(function () {
                                //设置编辑器不可用
                                // _editor.setDisabled();
                                //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                                _editor.hide();
                                //侦听图片上传
                                _editor.addListener('beforeInsertImage', function (t, arg) {
                                    //有多少张图片arg.length就是多大
                                    $("#logo").val(arg[0].src);
                                    $("#tpyl").attr("src",arg[0].src);

                                });
                            });
                        });
                        //弹出图片上传的对话框
                        function upImage() {
                            var myImage = _editor.getDialog("insertimage");
                            myImage.open();
                        }
                    </script>
                </tr>
                <tr >
                    <td><lable for="ord">排序:</lable></td>
                    <td>
                        <input class="easyui-validatebox" name="ord" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" data-options="required:true" style="width:200px;"/>
                    </td>
                    <td rowspan="2"></td>
                </tr>

            </table>
            <div style="margin-top:40px;text-align: center">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="editServerLabel()">保存</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="$('#edit_serverLabel_dialog').dialog('close')">取消</a>
            </div>
        </form>
    </div>
    <!--弹框-->
    <div class="easyui-dialog" id="edit_serverLabel_Describe_dialog" title="添加服务标签描述" data-options="closed:true,modal:true,width:900,height:600">
        <table>
            <tr>
                <td style="text-align: center ;background-color: #e0e0e0"><h2 style="color: red" id="DescribeName"></h2></td>
            </tr>
            <tr>
                <td><textarea id="editor" style="height:400px;width: 100%"  name="detail"></textarea></td>
            </tr>
        <script>
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor',{
        serverUrl:"${path}/file/upload.do"
         });
        </script>
        </table>
        <div style="margin-top:40px;text-align: center">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="editServerLabelDescribeName()">保存</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="$('#edit_serverLabel_Describe_dialog').dialog('close')">取消</a>
        </div>
    </div>
    <script>
        var flag="add"
        //添加和修改
    function openEditServerLabelBox(str) {
        $("#edit_serverLabel_form").form("clear");
        if(str == "update"){
            flag=str;
            var rowsData = $("#serverLabel_datagrid").datagrid("getSelections");//找到所有选中的行
            if(rowsData.length!=1){
                $.messager.alert("提示","请选择一个服务标签","info");
                return;
            }
            $("#edit_serverLabel_dialog").dialog({title: "修改服务标签"});
            $("#edit_serverLabel_dialog").form("load",rowsData[0]);
            $("#tpyl").attr("src",rowsData[0].classPropertyImg);
        }else{
            flag=str;
        }
        $("#edit_serverLabel_dialog").dialog("open");
    }


        //保存修改
        function editServerLabel() {
            $.messager.progress();
            var url = "";
            var str = "";
            if(flag == 'add'){
                url = "${path}/serverLabel/add.do";
                str = "添加";
            }else if(flag == 'update'){
                url = "${path}/serverLabel/edit.do";
                str = "修改";
            }
            $("#edit_serverLabel_form").form("submit",{
                url:url,
                onSubmit:function(){
                    var valid = $(this).form("validate");
                    if (!valid) {
                        $.messager.progress("close");
                    }
                    return valid;
                },
                success:function(data){
                    data=$.parseJSON(data);
                    $.messager.progress("close");
                    if(data.success){
                        $("#edit_serverLabel_dialog").dialog("close");
                        $.messager.show({
                            title:str +"成功",msg:str +"成功!",
                            timeout:600,style:"left:30%;top:10%",
                            showType:"fade"
                        });
                        $("#serverLabel_datagrid").datagrid("reload");
                    }else{
                        $.messager.alert(str +"失败", data.msg,"error");
                    }
                }
            });
        }

    //删除
    function deleteServerLabel() {
        var rowsData = $("#serverLabel_datagrid").datagrid("getSelections");//找到所有选中的行
       if(rowsData.length!=1){
           $.messager.alert("提示","请选择一个服务标签","info");
           return;
       }
        $.messager.confirm("确认","确定要删除该服务标签吗?",function(yes){
            if(yes){
                $.messager.progress();
                $.ajax({
                    url:"${path}/serverLabel/delete.do",
                    type:"post",
                    data:{id : rowsData[0].id},
                    dataType:"json",
                    success:function(data){
                        $.messager.progress("close");
                        if(data.success){
                            $.messager.show({
                                title:"删除成功",
                                msg:"删除成功!",
                                timeout:600,
                                style:"left:30%;top:10%",
                                showType:"fade"
                            });
                            $("#serverLabel_datagrid").datagrid("reload");
                        }else{
                            $.messager.alert("删除失败", data.msg,"error");
                        }
                    },
                    error:function(){
                        $.messager.progress("close");
                        $.messager.alert("删除失败", "服务器连接失败!","error");
                    }
                });
            }
        });
    }
    //查询
    function doServerLabelSearch(val) {
        var queryParams = {};
        if(val.length > 0){
            queryParams.keyWord = val;
        }
        var options = $("#serverLabel_datagrid").datagrid('getPager').data("pagination").options;
        options.pageNumber = 1;
        //重新加载
        $("#serverLabel_datagrid").datagrid('options').url = "${path}/serverLabel/serverLabelList.do";
        $("#serverLabel_datagrid").datagrid('options').queryParams = queryParams;
        $("#serverLabel_datagrid").datagrid('reload');
    }
    //添加描述
  function openEditDescribe() {
      var rowsData = $("#serverLabel_datagrid").datagrid("getSelections");//找到所有选中的行
      if(rowsData.length!=1){
          $.messager.alert("提示","请选择一个服务标签","info");
          return;
      }
      ue.setContent(rowsData[0].detail);
      $("#DescribeName").html("<span  style='color: #000' >描述:</span>"+rowsData[0].classPropertyText)
      $("#edit_serverLabel_Describe_dialog").dialog("open");

  }
  function editServerLabelDescribeName() {
      var rowsData = $("#serverLabel_datagrid").datagrid("getSelections");//找到所有选中的行
      var editor=ue.getContent();
      $.ajax({
          url:"${path}/serverLabel/editDescribe.do",
          type:"post",
          data:{  id : rowsData[0].id,
              detail:editor
          },
          dataType:"json",
          success:function(data){
              $.messager.progress("close");
              if(data.success){
                  $("#edit_serverLabel_Describe_dialog").dialog("close");
                  $.messager.show({
                      title:"编辑成功",msg:"编辑成功!",
                      timeout:300,style:"left:30%;top:10%",
                      showType:"fade"
                  });
                  $("#serverLabel_datagrid").datagrid("reload");
              }else{
                  $.messager.alert(str +"失败", data.msg,"error");
              }
          },
          error:function(){
              $.messager.progress("close");
              $.messager.alert("删除失败", "服务器连接失败!","error");
          }
      });
  }
    </script>
</div>

</body>
</html>
